<template>
  <div class="ysq-right-bottom d-flex-c">
    <div class="panel-header-bg flex-between flex-0">
      <div class="title-text">
        站网情况
      </div>
      <span class="c-text-blue f-12">截至当前</span>
    </div>
    <div
      class="panel-zone-big-bg right-top flex-between fixed-height-box"
    >
      <div
        class="panel-zone-bg flex-0 m-r-mini report-data-box full-height d-flex-c"
      >
        <div class="flex-between ai-c m-b-tiny flex-0">
          <div class="little-title flex-between full-width">
            数据到报
            <SwitchTab
              :tab-list="reportTabList"
              v-model="reportTab"
            />
          </div>
        </div>
        <div class="d-flex-c flex-1 overflow-hidden">
          <div class="report-statistics flex-ai-c flex-0">
            <div
              v-for="(item,index) in reportStatisticsList"
              :key="index"
              class="report-statistics-item d-flex-c ai-c jc-c"
              @click="showReverseCheck(item.field)"
              :class="{'c-pointer':item.needPointer}"
            >
              <div
                class="flex-ai-c"
                style="line-height: 16px;"
              >
                <span
                  class="f-20 ff-agencyyr report-statistics-value"
                  :class="{[item.type]: item.type ,' c-text-blue':!item.type}"
                >{{ reportStatistics[item.field] }}</span>
                <span class="f-12  c-white">条</span>
              </div>
              <span class="f-14  c-white">{{ item.label }}</span>
            </div>
          </div>
          <div class="flex-1 overflow-hidden">
            <ScrollTable
              ref="grid"
              :columns="reportColumns"
              :data="reportTableData"
              :loading="tableLoading"
              :highlight-current-row="true"
              :stripe="false"
              :has-seq="false"
              header-cell-class-name="wrap-header-cell"
            />
          </div>
        </div>
      </div>
      <EquRunningStatus />
    </div>
    <DetailModal
      v-if="detailVisible"
      :visible="detailVisible"
      :columns="detailColumns"
      :static-data="detailData"
      @close="detailVisible=false"
      width="776px"
    />
  </div>
</template>

<script>
import SwitchTab from '@/views/business/ysqjcdp/components/switch-tab.vue'
import EquRunningStatus from '../../components/business/equ-running-status.vue'
import DetailModal from '@/views/business/ysqjcdp/components/modal/detail-modal.vue'
import ScrollTable from '@/views/business/ysqjcdp/components/scroll-table'

// const stateMap = {
//   0: '正常',
//   1: '异常',
//   2: '信号弱',
//   3: '信号差'
// }
export default {
  name: 'YsqRightBottom',
  components: { SwitchTab, EquRunningStatus, DetailModal, ScrollTable },
  data () {
    this.reportStatisticsList = [
      {
        label: '应报',
        field: 'yg'
      },
      {
        label: '实报',
        field: 'sb',
        needPointer: true
      },
      {
        label: '缺报',
        field: 'qb',
        type: 'red'
      }
    ]
    return {
      reportTab: '0',
      reportColumns: [
        {
          title: '设备名',
          field: 'stnm',
          width: 80
        },
        {
          title: '监测数据',
          field: 'jcsj',
          width: 80,
          slots: {
            header: () => {
              return [
                <div class="d-flex-c ai-c">
                  <span>监测</span>
                  <span>数据</span>
                </div>
              ]
            }
          }
        },
        {
          title: '运行状态',
          field: 'state',
          width: 40,
          slots: {
            header: () => {
              return [
                <div class="d-flex-c ai-c">
                  <span>运行</span>
                  <span>状态</span>
                </div>
              ]
            }
          }
        },
        {
          label: '最新到报时间',
          field: 'tm',
          width: 100,
          slots: {
            header: () => {
              return [
                <div class="d-flex-c ai-c">
                  <span>最新</span>
                  <span>到报时间</span>
                </div>
              ]
            }
          }
        }

      ],
      reportTableData: [],
      reportStatistics: {
        yg: 0,
        sb: 0,
        qb: 0
      },
      tableLoading: false,
      detailVisible: false,
      detailColumns: [
        // { title: '行政区划', field: 'stationName', width: 140 },
        { title: '设备名', field: 'stnm', width: 120 },
        { title: '设备码', field: 'stcd', width: 120 },
        { title: '监测数据', field: 'jcsj', width: 120 },
        { title: '运行状态', field: 'state', width: 120 },
        { title: '最新到报时间', field: 'tm', minWidth: 140 }
      ],
      detailData: []
    }
  },
  computed: {
    reportTabList () {
      return [
        {
          label: new Date().getHours() + '时以来',
          value: '0'
        },
        {
          label: '1h',
          value: '1'
        },
        {
          label: '3h',
          value: '3'
        },
        {
          label: '6h',
          value: '6'
        },
        {
          label: '12h',
          value: '12'
        }
      ]
    }
  },
  watch: {
    reportTab: {
      immediate: true,
      handler () {
        this.getSJDBData()
      }
    }
  },
  methods: {
    async getSJDBData () {
      this.tableLoading = true
      const queryDate = this.getQueryDate()
      const data = await this.$request.formDataPost(window.outApiBk + 'foreign/selectZwTble', {
        startTime: queryDate[0],
        endTime: queryDate[1]
      }, false, 'POST', true)
      this.reportStatistics.yg = data.COUNT
      this.reportStatistics.qb = data.QBNUM
      this.reportStatistics.sb = data.SBNUM
      this.reportTableData = data.LIST
      this.tableLoading = false
    },
    getQueryDate (type = this.reportTab) {
      const now = this.$utils.createDate()
      const nowStr = now.format('YYYY-MM-DD HH:mm:ss')
      const endStr = now.subtract(1, 'hour').format('YYYY-MM-DD HH:59:59')
      switch (type) {
        case '0':// x时以来
          return [now.format('YYYY-MM-DD HH:00:00'), nowStr]
        default:
          return [now.subtract(Number(type), 'hour').format('YYYY-MM-DD HH:00:00'), endStr]
        // case '1': // 1h
        //   return [now.subtract(1, 'hour').format('YYYY-MM-DD HH:00:00'), endStr]
        // case '3': // 3h
        //   return [now.subtract(3, 'hour').format('YYYY-MM-DD HH:00:00'), endStr]
        // case '6': // 6h
        //   return [now.subtract(6, 'hour').format('YYYY-MM-DD HH:00:00'), endStr]
        // case '12': // 12h
        //   return [now.subtract(12, 'hour').format('YYYY-MM-DD HH:00:00'), endStr]
      }
    },
    showReverseCheck (field) {
      if (field === 'sb') {
        this.detailVisible = true
        this.detailData = this.reportTableData
      }
      console.log({ field })
    }
  }
}
</script>

<style lang="scss" scoped>
.fixed-height-box {
  height: 287px;
}

.report-data-box {
  width: 330px;
}

.report-statistics-item {
  background-image: url("~@/assets/images/ysqjcdp/report-statistics-bg.png");
  background-size: 100% 100%;
  width: 96px;
  height: 47px;
  padding-top: 6px;
  padding-bottom: 9px;

  &:not(:last-child) {
    margin-right: 11px;
  }

  .report-statistics-value {
    font-size: 20px;
    font-weight: 700;
    text-align: center;

    &.red {
      color: #ff5a69;
    }
  }
}
</style>
